<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="%BASE_URL%logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_TITLE% %VITE_VERSION%</title>
  </head>
  <body>
    <div id="root">
      <div class="spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

      <style>
        #root {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
        }

        .spinner {
          position: relative;
          width: 52.8px;
          height: 52.8px;
          perspective: 105.6px;
        }

        .spinner div {
          width: 100%;
          height: 100%;
          background: #1890ff;
          position: absolute;
          left: 50%;
          transform-origin: left;
          animation: spinner-16s03x 2.8s infinite;
        }

        .spinner div:nth-child(1) {
          animation-delay: 0.21s;
        }

        .spinner div:nth-child(2) {
          animation-delay: 0.42s;
        }

        .spinner div:nth-child(3) {
          animation-delay: 0.63s;
        }

        .spinner div:nth-child(4) {
          animation-delay: 0.84s;
        }

        .spinner div:nth-child(5) {
          animation-delay: 1.0499999999999998s;
        }

        @keyframes spinner-16s03x {
          0% {
            transform: rotateY(0deg);
          }

          50%,
          80% {
            transform: rotateY(-180deg);
          }

          90%,
          100% {
            opacity: 0;
            transform: rotateY(-180deg);
          }
        }
      </style>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
  <script src="./lib/captcha/load.min.js"></script>
</html>
